<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			text{
				font: bold 48px monospace;
			}
			.enter{
				fill: green;
			}
			.update{
				fill: #333;
			}
		</style>
		<script src="../js/d3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div></div>
		<svg width="960" height="500"></svg>
		<!--<script type="text/javascript">
			var alphabet="abcdefghijklmnopqrstuvwxyz".split("");
			var svg=d3.select("div").insert("svg");
			svg.attr("width","400px").style("height","300px").style({
				"background-color":"red",
			})
			var height=svg.attr("height");
			g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");
			function update(data){
				var text=g.selectAll("text").data(data);
				text.attr("class","update");
				text.enter().append("text")
				.attr("x",function(d,i){
					return i*32;
				}).attr("dy",".35em").merge(text).text(function(d){
					return d;
				});
				text.exit().remove();
			}
			update(alphabet);
			d3.interval(function(){
				update(d3.shuffle(alphabet).slice(0,Math.floor(Math.random()*36)).sort());
			},1500);
		</script>-->
		<script>

var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");

function update(data) {

  // DATA JOIN
  // Join new data with old elements, if any.
  var text = g.selectAll("text")
    .data(data);

  // UPDATE
  // Update old elements as needed.
  text.attr("class", "update");

  // ENTER
  // Create new elements as needed.
  //
  // ENTER + UPDATE
  // After merging the entered elements with the update selection,
  // apply operations to both.
  text.enter().append("text")
      .attr("class", "enter")
      .attr("x", function(d, i) { return i * 32; })
      .attr("dy", ".35em")
    .merge(text)
      .text(function(d) { return d; });

  // EXIT
  // Remove old elements as needed.
  text.exit().remove();
}

// The initial display.
update(alphabet);

// Grab a random sample of letters from the alphabet, in alphabetical order.
d3.interval(function() {
  update(d3.shuffle(alphabet)
      .slice(0, Math.floor(Math.random() * 26))
      .sort());
}, 1500);

</script>
	</body>
</html>
